
<template>
  <div class="payment-details">
    <div class="header">
      <h2>充值详情</h2>
      <div class="btn-group">
        <el-button type="text" @click="handleDetail" icon="el-icon-refresh-right">返回</el-button>
      </div>
    </div>
  <hr />
  <div class="payment-detail-item">

    <p class="detail-value">当日基准汇率：{{ paymentDetails.baseExchangeRate}}</p>
    <p class="detail-value">系统计算汇率：{{ paymentDetails.status}}</p>
    <p class="detail-value">系统汇率公式：&nbsp; 系统计算汇率=现汇买入价和卖出价的平均值/100</p>
    <p class="detail-value">有效时间：{{ paymentDetails.validTime}}</p>
    <p class="detail-value">备注：{{ paymentDetails.remarks}}</p>

    <el-table  v-loading="loading" :data="rateList" >
      <el-table-column label="交易币" align="center" prop="tradingCurrency" >
        <template slot-scope="scope">
          {{ scope.row.tradingCurrency==1?"人民币":"菲律宾比索"}}
        </template>
      </el-table-column>

      <el-table-column label="交易币单位" align="center" prop="tradingCurrencyUnit" />

      <el-table-column label="基本币" align="center" prop="baseCurrency" />

      <el-table-column label="现买入价" align="center" prop="buyingPrice" width="180"/>


      <el-table-column label="现卖出价" align="center" prop="sellingPrice" width="180"/>


      <el-table-column label="发布时间" align="center" prop="releaseTime" width="180"/>

    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>

</div>
</template>

<script >
import { getRate, getRateList } from '@/api/finance/rate'
 export default {
  name: "Details",
  data() {
    return {
      id:"",
      paymentDetails:[],
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 汇率管理表格数据
      rateList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
    }
  },
   created() {
    const id = this.$route.params && this.$route.params.Id;
     getRate(id).then(response => {
        this.paymentDetails = response.data;
      });
this.getList(id);
  },
  methods: {
    /** 查询汇率管理列表 */
    getList(id) {
      this.loading = true;
      getRateList(id).then(response => {
        this.rateList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    handleDetail() {
      this.$router.push({path:"/finance/rate"}); // 假设支付列表页面的路由名称为 '支付列表'
    }
  }
 }
</script>

<style >
.payment-details {
  width: 1000px;
  border: 1px solid #ccc;
  padding: 20px;
}

.payment-detail-item {
    margin: 10px 0;
    padding: 5px;
}
.detail-value {
    font-size: 16px;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.btn-group{
  display: flex;
  justify-content: flex-end; /* 将按钮放在最右端 */
  margin-bottom: 10px; /* 调整与标题之间的间距 */
}
</style>
